<template>
  <div :class="quickViewWrapperClass">
    <div class="quick-view-modal">
      <div class="close-btn quick-view-close" @click="close()">
        <i class="flaticon-close"></i>
      </div>
      <div class="quick-view-body">
        <div class="row align-items-center">
          <div class="col-12 col-md-5 col-lg-6">
            <div class="quick-view-product-carousel swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide" style="">
                  <div class="item">
                    <img
                      :src="require('assets/images/products/product-14.png')"
                      alt="product"
                    />
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="item">
                    <img
                      :src="require('assets/images/products/product-15.png')"
                      alt="product"
                    />
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="item">
                    <img
                      :src="require('assets/images/products/product-13.png')"
                      alt="product"
                    />
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="item">
                    <img
                      :src="require('assets/images/products/product-13.png')"
                      alt="product"
                    />
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="item">
                    <img
                      :src="require('assets/images/products/product-14.png')"
                      alt="product"
                    />
                  </div>
                </div>
              </div>

              <div class="swiper-navigation">
                <button type="button" class="swiper-button-prev">
                  <i class="flaticon-back"></i>
                </button>
                <button type="button" class="swiper-button-next">
                  <i class="flaticon-next"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-7 col-lg-6">
            <div class="quick-view-product-content">
              <div class="product-status">{{ showProduct.featured }}</div>
              <h3>{{ showProduct.title }}</h3>
              <p>
                Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam
                nonumy eirmod tempor invidunt labore et dolore magna aliquyam
                erat sed diam voluptua.
              </p>
              <div class="product-price">
                ${{ showProduct.currentPrice }}
                <del>${{ showProduct.originalPrice }} </del>
              </div>
              <div class="share-post">
                <h4>Share:</h4>
                <ul class="social-list">
                  <li>
                    <a href="#" target="_blank">
                      <i class="flaticon-facebook"></i
                    ></a>
                  </li>
                  <li>
                    <a href="#" target="_blank">
                      <i class="flaticon-instagram"></i
                    ></a>
                  </li>
                  <li>
                    <a href="#" target="_blank">
                      <i class="flaticon-twitter"></i
                    ></a>
                  </li>
                  <li>
                    <a href="#" target="_blank">
                      <i class="flaticon-pinterest"></i
                    ></a>
                  </li>
                </ul>
              </div>
              <div class="product-choice">
                <div class="product-choice-item">
                  <label>Select Colors</label>
                  <select class="form-control product-color" style="">
                    <option value="1">Available colors</option>
                    <option value="2">Blue</option>
                    <option value="3">Green</option>
                  </select>
                </div>
                <div class="product-choice-item">
                  <label>Select Amount</label>
                  <select class="form-control product-color" style="">
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                  </select>
                </div>
              </div>
              <div class="product-action">
                <div class="product-action-item">
                  <a
                    href="#"
                    class="btn main-btn main-btn-radius"
                    @click="addCart"
                  >
                    Add To Cart
                  </a>
                </div>
                <div class="product-action-item">
                  <a
                    href="#"
                    class="btn main-btn main-btn-radius main-btn-bgless"
                  >
                    <i class="flaticon-like"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Import Swiper and modules

import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  ref,
  watch,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

const props = defineProps({
  visible: {
    type: Boolean,
    require: true,
    default: false,
  },
  showProduct: {
    type: Object,
    require: true,
    default: () => {},
  },
});

const data = reactive({
  quickViewWrapperClass: "quick-view-wrapper",
  model: null,
  options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
  colorOptions: ["red", "green", "blue"],
  amountOptions: [1, 2, 3],
});
const { quickViewWrapperClass, colorOptions, amountOptions, model, options } =
  toRefs(data);

watch(
  () => props.visible,
  (val) => {
    console.log("watch", val);
    if (val) {
      data.quickViewWrapperClass = "quick-view-wrapper active";
      // $(".quick-view-wrapper").addClass("active");
    } else {
      // $(".quick-view-wrapper").removeClass("active");
      data.quickViewWrapperClass = "quick-view-wrapper";
    }
  },
  { deep: true, immediate: true }
);

onBeforeMount(() => {});
onMounted(() => {
  Swiper.use([Navigation, Pagination, Controller]); // 使用需要的功能
  var quickViewProductCarousel = new Swiper(".quick-view-product-carousel", {
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});

// 声明emits
const $emit = defineEmits(["onClose"]);

const close = () => {
  $emit("onClose", "child返回值");
};

const addCart = () => {};
</script>

<style lang="scss" scoped>
.quick-view-product-carousel {
  // position: static;

  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #4f5ac2;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;

    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: 10px;
  }
  .swiper-navigation button.swiper-button-next {
    right: 10px;
  }
}
</style>
